<script lang="ts" setup>
const colorMode = useColorMode();

function toggleDark() {
  colorMode.preference = colorMode.value === "light" ? "dark" : "light";
}
const includeStars = useRuntimeConfig().public.includeStars;
</script>

<template>
  <div class="page-section">
    <div
      :class="`
      super-header
      w-full
      mt-4
      mb-[12%]
      sm:mb-10
      md:mb-14
      lg:mb-16
      flex
      justify-between
      items-center
    `"
    >
      <NuxtLink
        to="https://formkit.com?utm_source=dnd&utm_medium=website&utm_campaign=header"
        :class="`
        group/logo
        head-message
        text-xs
        md:text-sm
        flex
        transition-all
        text-slate-700
        hover:text-slate-800
        grayscale
        hover:grayscale-0
        opacity-80
        hover:opacity-100

        dark:text-slate-300
        dark:hover:text-slate-200
      `"
      >
        <LogoMark
          class="w-3 mr-2 fill-[#FCAB5E] grayscale brightness-50 dark:brightness-100 group-hover/logo:brightness-100 group-hover/logo:grayscale-0"
        />
        Made with <span class="text-pink-500 mx-[0.25ch]">♥</span> by
        <span class="hidden sm:inline sm:mx-[0.5ch]">the</span> FormKit
        <span class="hidden sm:inline sm:ml-[0.5ch]">team</span>
      </NuxtLink>
      <ul class="flex gap-3">
        <li>
          <NuxtLink
            to="https://github.com/formkit/drag-and-drop"
            class="group/github flex items-center relative"
          >
            <GitHubStars v-if="includeStars" />
            <GitHubLogo
              class="text-slate-700 opacity-70 group-hover/github:opacity-100 w-4 h-4 sm:w-5 sm:h-5 dark:text-slate-300"
            />
          </NuxtLink>
        </li>
        <li>
          <button
            @click="toggleDark"
            aria-label="Toggle color mode"
            class="text-slate-500 hove:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300"
          >
            <svg
              v-show="$colorMode.value === 'light'"
              class="w-5 h-5"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 512 512"
            >
              <path
                fill="currentColor"
                d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM160 256a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zm224 0a128 128 0 1 0 -256 0 128 128 0 1 0 256 0z"
              />
            </svg>
            <svg
              v-show="$colorMode.value === 'dark'"
              class="w-5 h-5"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 576 512"
            >
              <path
                fill="currentColor"
                d="M118.6 80c-11.5 0-21.4 7.9-24 19.1L57 260.3c20.5-6.2 48.3-12.3 78.7-12.3c32.3 0 61.8 6.9 82.8 13.5c10.6 3.3 19.3 6.7 25.4 9.2c3.1 1.3 5.5 2.4 7.3 3.2c.9 .4 1.6 .7 2.1 1l.6 .3 .2 .1 .1 0 0 0 0 0s0 0-6.3 12.7h0l6.3-12.7c5.8 2.9 10.4 7.3 13.5 12.7h40.6c3.1-5.3 7.7-9.8 13.5-12.7l6.3 12.7h0c-6.3-12.7-6.3-12.7-6.3-12.7l0 0 0 0 .1 0 .2-.1 .6-.3c.5-.2 1.2-.6 2.1-1c1.8-.8 4.2-1.9 7.3-3.2c6.1-2.6 14.8-5.9 25.4-9.2c21-6.6 50.4-13.5 82.8-13.5c30.4 0 58.2 6.1 78.7 12.3L481.4 99.1c-2.6-11.2-12.6-19.1-24-19.1c-3.1 0-6.2 .6-9.2 1.8L416.9 94.3c-12.3 4.9-26.3-1.1-31.2-13.4s1.1-26.3 13.4-31.2l31.3-12.5c8.6-3.4 17.7-5.2 27-5.2c33.8 0 63.1 23.3 70.8 56.2l43.9 188c1.7 7.3 2.9 14.7 3.5 22.1c.3 1.9 .5 3.8 .5 5.7v6.7V352v16c0 61.9-50.1 112-112 112H419.7c-59.4 0-108.5-46.4-111.8-105.8L306.6 352H269.4l-1.2 22.2C264.9 433.6 215.8 480 156.3 480H112C50.1 480 0 429.9 0 368V352 310.7 304c0-1.9 .2-3.8 .5-5.7c.6-7.4 1.8-14.8 3.5-22.1l43.9-188C55.5 55.3 84.8 32 118.6 32c9.2 0 18.4 1.8 27 5.2l31.3 12.5c12.3 4.9 18.3 18.9 13.4 31.2s-18.9 18.3-31.2 13.4L127.8 81.8c-2.9-1.2-6-1.8-9.2-1.8zM64 325.4V368l105.6-52.8c-10.7-1.9-22.2-3.2-33.9-3.2c-23.7 0-46.2 5.1-63.2 10.5c-3.1 1-5.9 1.9-8.5 2.9zm409.8-10.3c-10.5-1.9-21.9-3.1-33.4-3.1c-23.7 0-46.4 5.1-63.6 10.5c-2.7 .8-5.2 1.7-7.5 2.5l2.3 41.2 102.3-51.1z"
              />
            </svg>
          </button>
        </li>
      </ul>
    </div>
  </div>
</template>

<style></style>
